import React from 'react';
import { PropTypes } from 'prop-types';
import './index.css';
import './weather_icon.css';

class HourlyWeather extends React.Component {
  constructor() {
    super();
    this.state = {
      city: '北京',
      weather: '',
      className: {},
    }
  }
  componentDidMount() {
    this.draw();
  }
  componentDidUpdate() {
    this.draw();
  }
  draw() {
    const cvs = this.refs.timeX;
    const ct = cvs.getContext('2d');
    const { width, height } = cvs;
    const baseLine = height - 40;
    const { data } = this.props;
    ct.clearRect(0, 0, width, height)
    ct.translate(0.5, 0.5);
    ct.strokeStyle = '#000';
    ct.font = 'normal normal normal 12px';
    ct.lineWidth = 0.5;
    ct.textAlign = 'center';
    ct.textBaseline = 'middle';
    ct.beginPath();
    ct.moveTo(0, baseLine);
    ct.lineTo(width, baseLine);
    ct.closePath();
    ct.stroke();
    for (let i = 0, { length } = data; i < length; i += 1) {
      // console.log(width, height) //eslint-disable-line
      const x1 = ((i * width) / length) + 25;
      const y1 = baseLine;
      const y2 = baseLine - 10;
      const y3 = baseLine + 20;
      const y4 = baseLine - 30;
      const y5 = baseLine - 50;
      ct.beginPath();
      ct.moveTo(x1, y1);
      ct.lineTo(x1, y2);
      ct.closePath();
      ct.stroke();
      ct.fillText(data[i].time, x1, y3);
      ct.fillText(data[i].weather, x1, y4);
      ct.fillText(`${data[i].temp}℃`, x1, y5);
    }
  }
  render() {
    return (
      <div className="weather">
        { this.props.data.length ?
          <canvas ref="timeX" /> : ''
        }
      </div>
    )
  }
}
export default HourlyWeather;
HourlyWeather.propTypes = {
  data: PropTypes.arrayOf(Array),
}
